<template>
  <div>
    <Appheader :parentToChild="ymname"></Appheader>
    <div class="guwenList" v-loading="loading">
      <div class="home_swiper">
        <el-carousel arrow="never">
          <el-carousel-item v-for="(itemswiper,iswiper) in swiper" :key="iswiper">
            <img :src="itemswiper.url" alt class="swiper_url" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="guwen_List">
        <ul>
          <li v-for="(list, index) in techerList" :key="index">
            <p class="line"></p>
            <div class="guwen_li flex">
              <img :src="list.authorPhoto" alt />
              <div class="guwen_li_div">
                <div class="guwen_li_div_a flex">
                  <div>{{list.authorName}}</div>
                  <span v-if="list.ykSchool">{{list.ykSchool.name}}</span>
                </div>
                <div class="guwen_li_div_b hidden3" v-html="list.authorDetails.slice(0,260)">
                </div>
                <div class="guwen_li_div_c">
                  <div class="c_a" @click="see_more(list.id)">了解更多</div>
                </div>
              </div>
            </div>
          </li>
          <div class="page" v-if="total!=0">
            <div class="page_a" @click="handleCurrentChange(1)">首页</div>
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              layout="prev, pager, next"
              :total="total"
              :page-size="6"
            ></el-pagination>
            <div class="page_a" @click="handleCurrentChange('w')">尾页</div>
          </div>
        </ul>
      </div>
    </div>
    <Appfooter></Appfooter>
  </div>
</template>

<script>
import Appheader from "./header";
import Appfooter from "./footer";
import { rotationChart, ykAuthorlist } from "../api/index.js";
export default {
  name: "App",
  props: {},
  data() {
    return {
      ymname: "专家顾问",
      swiper: [], //轮播图
      loading: true,
      currentPage: 1,
      total: 0, //列表总数
      pagenum: 1, //请求的页数
      pagesize: 6, //请求的数量
      techerList: []
    };
  },
  computed: {},
  created() {},
  mounted() {
    rotationChart()
      .then(res => {
        this.swiper = res.data.rows;
      })
      .catch(e => {});
    this.post();
  },
  watch: {},
  methods: {
    post() {
      let msg = {
        pageSize: this.pagesize,
        pageNum: this.pagenum
      };

      ykAuthorlist(this.qs(msg))
        .then(res => {
          this.techerList = res.data.rows;
          this.total=res.data.total;
        })
        .catch(e => {});
      this.loading = false;
    },
    handleCurrentChange(val) {
      if (val == "w") {
        this.pagenum = Math.ceil(this.total / this.pagesize);
      } else {
        this.pagenum = val;
      }
      this.currentPage=this.pagenum;
      this.loading = true;
      this.post();
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    see_more(id) {
      this.$router.push({
        name: "guwenDetail",
        params: {
          id:id,
          name:"专家顾问"
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  },
  components: { Appheader, Appfooter }
};
</script>

<style scoped>
.home_swiper {
  width: 100%;
  height: 350px;
}
.home_swiper >>> .el-carousel__container {
  height: 350px !important;
}
.swiper_url {
  width: 100%;
  height: 100%;
}
.home_swiper >>> .el-carousel__button {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 50%;
}
.home_swiper >>> .is-active button {
  background-color: #d81417;
}
/* guwen_List */
ul {
  padding-top: 31px;
}
li {
  margin-bottom: 25px;
}
.guwen_List {
  width: 1200px;
  margin: 0 auto;
}
.guwen_li {
  width: 1200px;
  height: 322px;
  /* background: rgba(255, 255, 255, 1); */
  border: 2px solid rgba(23, 23, 23, 1);
  box-sizing: border-box;
  padding-left: 32px;
}
.line {
  width: 195px;
  height: 5px;
  background: rgba(23, 23, 23, 1);
  margin-left: 34px;
}
li:hover .guwen_li {
  border: 2px solid #c8a94f;
}
li:hover .line {
  background: #c8a94f;
}
.guwen_li > img {
  width: 195px;
  height: 263px;
  margin-right: 18px;
}
.guwen_li_div {
  background: rgba(244, 248, 251, 1);
  padding: 55px 15px 22px 16px;
}
.guwen_li_div_a {
  font-size: 18px;
  color: #333;
  margin-bottom: 14px;
}
.guwen_li_div_a > div {
  font-size: 24px;
  font-weight: bold;
  margin-right: 20px;
}
.guwen_li_div_b {
  width: 893px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 27px;
  height:74px;
}
.guwen_li_div_c {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}
.c_a {
  width: 99px;
  height: 30px;
  background: #c8a94f;
  border-radius: 15px;
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  line-height: 30px;
  text-align: center;
  margin-top: 30px;
  margin-right: 19px;
}
/* page */
.page {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 75px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.page >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #d81417 !important;
}
.page >>> .el-pager li,
.page >>> .btn-next,
.page >>> .btn-prev {
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 34px;
  text-align: center;
  border-radius: 5px;
}
.page_a {
  width: 34px;
  height: 34px;
  background: rgba(243, 243, 243, 1);
  border-radius: 5px;
  font-size: 12px;
  color: #333;
  line-height: 34px;
  text-align: center;
}
.page_a:hover {
  background: #d81417;
  color: #fff;
}
</style>
